<template>
    <i class="iconfont icon-bar" :class="className" :style="{'font-size': fontSize, 'color': color}" @click="$click"></i>
</template>

<script>
export default {
    name: 'Icon',
    title: '图标',
    props: {
        className: {
            type: String,
            default: ''
        },
        size: {
            type: [String, Number],
            default: 20
        },
        color: {
            type: String,
            default: ''
        }
    },
    computed: {
        fontSize() {
            return typeof this.size === 'number'?   `${this.size}px` : this.size
        }
    },
    methods: {
        $click() {
            // this.$emit('click')
        }
    }
}
</script>

<style lang="scss" scoped>
    .icon-bar{
        margin-right: 10px;
    }
</style>